<template>
	<!-- <view :class="[themeType?'page page-light':'page page-dark']"> -->
	<view :class="['page',vtheme.theme]">
		<view class="qiun-columns">
			<temperature id="temperature2" :min="0" :max="1" :val="simple" @change="changeBrightness" title="屏幕亮度" colorSatrt="#000000" colorEnd="#ffffff" :showUnit="false"/>
		</view>
		<view class="theme-dark">
			<view class="theme-dark-title">主题切换：</view>
			<view class="theme-dark-switch">
				<v-switch v-model="on" size="0.9" :activeValue="1" :inactive-value="0" @change="toggleMode"></v-switch>
			</view>
		</view>
		
	</view>
</template>

<script>
	import temperature from './temperature.vue'
	export default {
		components: {
			temperature
		},
		data() {
			return {
				simple: 0.5,
				url: 'https://ext.dcloud.net.cn/plugin?id=3469',
				on: true,
				theme: '',
			}
		},
		onLoad() {
			this.getBrightness()
		},
		methods: {
			getBrightness() {
				let self = this
				uni.getScreenBrightness({
					success: function (res) {
						self.simple = res.value
					}
				})
			},
			changeBrightness(value) {
				uni.setScreenBrightness({
					value: value,
					success: function () {
						console.log('success');
					}
				});
			},
			toggleMode(val) {
				let flag = val == 1
				let theme = ''
				if (flag) {
					theme = 'light'
					uni.setNavigationBarColor({
						frontColor: '#333333',
						backgroundColor: '#ffffff' 
					})
				} else {
					theme = 'dark'
					uni.setNavigationBarColor({
						frontColor: '#ffffff',
						backgroundColor: '#333333'
					})
				}
				uni.setStorageSync('padTheme', theme)
				this.vGetTheme(theme)
			}
		}
	}
</script>

<style lang="scss">
	.page {
		display: flex;
		flex-direction: column;
		height: 100vh;
		@include base-background();
		@include text-color();
	}
	.qiun-columns {
		display: flex;
		flex-direction: column !important;
		padding: 40rpx;
	}
	.theme-dark {
		display: flex;
		width: 50%;
		margin: 30rpx auto;
		.theme-dark-title {
			font-size: 30rpx;
			font-weight: bold;
			height: 5vh;
			line-height: 5vh;
		}
	}
	// @media (prefers-color-scheme: dark) {
	// 	page{
	// 		background: #1f1f1f;
	// 		.theme-dark {
	// 			.theme-dark-title {
	// 				color: #ffffff;
	// 			}
	// 		}
	// 	}
	// }
	// .page-light {
	// 	background: #f1f1f1;
	// 	.theme-dark {
	// 		.theme-dark-title {
	// 			color: #000000;
	// 		}
	// 	}
	// }
	// .page-dark {
	// 	background: #1f1f1f;
	// 	.theme-dark {
	// 		.theme-dark-title {
	// 			color: #ffffff;
	// 		}
	// 	}
	// }
</style>
